
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery.bxslider.js"></script>
<title>slider</title>
<link href="css/jquery.bxslider.css" rel="stylesheet" type="text/css">
<style>

	p{ width:100%; height:40px; font-size:20px; color:#333; line-height:40px; text-align:center; font-family:"微软雅黑"}

</style>
</head>
<body>

<p>slider1(maxSlides)</p>
<div class="slider1">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider1').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

            slideMargin: 10

          });

        });

    </script>

<p>slider2(slideWidth auto)</p>
<div class="slider2">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider2').bxSlider({

            slideWidth: 300, 

			auto: true,

  			autoControls: true,

            minSlides: 2,

            maxSlides: 2,

            slideMargin: 10

          });

        });

    </script>

<p>slider3(moveSlides)</p>
<div class="slider3">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div> 
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider3').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

			moveSlides: 1,

            slideMargin: 10

          });

        });

    </script>

<p>slider4(startSlide)</p>
<div class="slider4">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider4').bxSlider({

            slideWidth: 200,

            minSlides: 2,

            maxSlides: 3,

			moveSlides: 1,

			startSlide: 1,

            slideMargin: 10

          });

        });

    </script>

<p>slider5(Vertical)</p>
<div class="slider5">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider5').bxSlider({

			mode: 'vertical',

            slideWidth: 200,

            minSlides: 2,

            slideMargin: 10

          });

        });

    </script>

<p>slider6(Image)</p>
<div class="slider6">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider6').bxSlider({

			mode: 'fade',

            slideWidth: 600, 

            slideMargin: 10

          });

        });

    </script>

<p>slider7(infiniteLoop hideControlOnEnd)</p>
<div class="slider7">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar4"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider7').bxSlider({ 

            slideWidth: 600, 

			infiniteLoop: false,

			hideControlOnEnd: true,

            slideMargin: 10

          });

        });

    </script>

<p>slider8(adaptiveHeight)</p>
<div class="slider8">
<div class="slide"><img src="http://placehold.it/600x200&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/600x300&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/600x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/600x250&text=FooBar4"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider8').bxSlider({ 

            slideWidth: 600, 

			adaptiveHeight: true,

			startSlides: 0, 

            slideMargin: 10

          });

        });

    </script>

<p>slider9(ticker)</p>
<div class="slider9">
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar1"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar2"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar3"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar4"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar5"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar6"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar7"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar8"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar9"></div>
<div class="slide"><img src="http://placehold.it/350x150&text=FooBar10"></div>
</div>
<script type="text/javascript">

        $(document).ready(function(){

          $('.slider9').bxSlider({ 

            slideWidth: 200,

			minSlides: 3,

			maxSlides: 3,

			ticker: true,

			speed: 12000,

			startSlides: 0, 

            slideMargin: 10

          });

        });

    </script>
</body>
</html>
